<template>
    <li class="league col-xs-12 col-sm-6 col-md-4 col-lg-3" @click="showDetails(item)">
      <div>
        
      </div>
    </li>
</template>

<script>

export default {
  name: 'HLeagueInfo',
  props: ['item', 'index'],
  data () {
    return {
      ispc: commons.ispc
    }
  },
  methods: {
    showDetails(item){
      debugger;
      this.$store.dispatch('setLeague', item);
      this.$router.push(`/league/details/${item.id}`);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .match{ height: 30px; line-height: 20px; padding-top: 10px; text-align: left; color: #3e3e3e; cursor: pointer; }
  .match > div{ width: 100%; height: 100%; }
  .match span:last-child{ color: #9e9e9e; }
  .match:hover > div{ border-bottom: 1px solid #1d9af9; }
  .match:hover span{ color: #1d9af9; }
</style>
